<template>
  <!-- <el-form
    ref="loginForm"
    :rules="loginRules"
    :model="loginForm"
    class="login-form"
    status-icon
    label-width="0"
  > -->
  <el-form ref="loginForm" :model="loginForm" class="login-form" status-icon label-width="0">
    <el-form-item prop="username">
      <el-input
        v-model="loginForm.username"
        size="small"
        auto-complete="off"
        placeholder="请输入用户名"
        @keyup.enter.native="handleLogin">
        <i slot="prefix" class="icon-login" />
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input
        v-model="loginForm.password"
        :type="passwordType"
        size="small"
        auto-complete="off"
        placeholder="请输入密码"
        @keyup.enter.native="handleLogin">
        <i slot="suffix" class="el-icon-view el-input__icon" @click="showPassword" />
        <i slot="prefix" class="icon-password"></i>
      </el-input>
    </el-form-item>
    <el-form-item v-if="website.validateCode" prop="code">
      <Verify
        ref="verify"
        :mode="'pop'"
        :captcha-type="'blockPuzzle'"
        :img-size="{ width: '330px', height: '155px' }"
        @success="verifySuccess" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="small" class="login-submit" @click.native.prevent="handleLogin">登录
      </el-button>
      <el-button type="add" size="small" class="register-btn" @click.native.prevent="handleRegister">注册
      </el-button>
      <span class="forgot-pwd" @click="forgotPassword">忘记密码？</span>
    </el-form-item>
  </el-form>
</template>

<script>
import { getTenantId } from '@/api/login'
import { mapGetters } from 'vuex'
import Verify from '@/components/verifition/Verify'
import { setStore } from '@/util/store'

export default {
  name: 'Userlogin',
  components: {
    Verify
  },
  data() {
    return {
      socialForm: {
        code: '',
        state: ''
      },
      loginForm: {
        username: '',
        password: '',
        code: '',
        randomStr: 'blockPuzzle'
      },
      checked: false,
      code: {
        src: undefined,
        len: 4
      },
      loginRules: {
        // username: [
        //   { required: true, message: '请输入用户名', trigger: 'blur' },
        //   {
        //     pattern: /^([a-z\u4e00-\u9fa5\d]*?)$/, message: '请输入小写字母', trigger: 'blur'
        //   }
        // ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '密码长度最少为6位', trigger: 'blur' }
        ]
      },
      passwordType: 'password'
    }
  },
  computed: {
    ...mapGetters(['tagWel', 'website'])
  },
  methods: {
    showPassword() {
      this.passwordType === ''
        ? (this.passwordType = 'password')
        : (this.passwordType = '')
    },
    handleLogin() {
      this.$refs.verify.show()
    },
    verifySuccess(params) {
      this.loginForm.code = params.captchaVerification
      this.loginByUsername()
    },
    loginByUsername() {
      this.queryTenantId()
    },
    queryTenantId() {
      const params = {
        username: this.loginForm.username
      }
      getTenantId(params).then((res) => {
        // 写入到 sessionStore 方便 axios 每次请求获取 tab 范围内的租户ID
        setStore({ name: 'tenantId', content: res.data.data, type: 'session' })
        // 写入到 localStore 方便 下次登录回显上次选择的租户ID
        setStore({ name: 'tenantId', content: res.data.data })
        this.$store.dispatch('LoginByUsername', Object.assign({}, this.loginForm)).then(() => {
          this.$router.push({ path: this.tagWel.value })
        }).catch(err => {
          this.$message.error(err.message)
        })
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    // 忘记密码
    forgotPassword() {
      this.$emit('change', 'forgetPwd')
    },
    // 注册
    handleRegister() {
      this.$emit('change', 'register')
    }
  }
}
</script>

<style></style>
